<template>
	<view class="s-m-box">
		<view class="menu-box">
			<view class="s-m-b" @click="show('show',storesList,curStore)">{{curStore.name}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			<view class="s-m-b" @click="show('show',timeGroup,curTime)">{{curTime.name}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
		</view>
		<view class="good-mask mask-top" :style="!isExpand?'margin-left: 72px;width: calc(25% - 18px) ;':''"
			:class="state === 0 ? 'none' : state === 1 ? 'show' : ''" 
			@click="show">
			<view class="cate-content">
				<scroll-view scroll-y class="c-list comm-list">
					<view v-for="item in list" :key="item.id">
						<view class="cate-item" 
							:class="curItem.id == item.id ? 'cate-item-s' : ''"  
							@click="changItem(item)">{{item.name}}<text class="icon-font selected-icon" v-show="curItem.id == item.id">&#xe636;</text></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<dateWin ref="dateWin" @selectDate="selectDate"></dateWin>
	</view>
</template>

<script>
	import lang from "../../../js/conf/Lang.js";
	import dateWin from "../../comm/DateWin.vue";
	import { mapGetters } from "vuex";
	
	export default{
		computed: {
		    ...mapGetters(["isExpand"]),
		},
		components:{dateWin},
		data()
		{
			return{
				curItem:{},
				list : [],
				state : 0,
				
				curStore:{name:lang.report.allStoresTxt,id:"",type:1},
				storesList : [],
				
				curTime:{name:lang.report.allTimeTxt,id:"",type:3},
				 //1 日报 2月报 3季报  5 自定义
				timeGroup:[
					{
						name : lang.report.allTimeTxt,//1 日报 2月报 3季报  5 自定义
						id : "",
						type:3
					},
					{
						name : lang.report.dayTxt,//1 日报 2月报 3季报  5 自定义
						id : 1,
						type:3,
					},
					{
						name : lang.report.moonTxt,//1 日报 2月报 3季报  5 自定义
						id : 2,
						type:3,
					},
					{
						name : lang.report.seasonsTxt,//1 日报 2月报 3季报  5 自定义
						id : 3,
						type:3,
					}, 
					{
						name : lang.report.customTxt,//1 日报 2月报 3季报  5 自定义
						id : 5,
						type:3,
						st:"",
						et:"",
					}, 
				],
				toTxt:lang.saleReport.toTxt,
			}
		},
		methods:{
			initData(data)
			{
				this.storesList = [{name:lang.report.allStoresTxt,id:"",type:1}];
				if(data.store_ls)
				{
					let arr = this.getListArr(data.store_ls,1);
					this.storesList = this.storesList.concat(arr);
				}
			},
			
			/****切换出库入库****/
			resetTime()
			{
				this.curStore = {name:lang.report.allStoresTxt,id:"",type:1};
				this.curTime = {name:lang.report.allTimeTxt,id:"",type:3};
				this.changItem(this.curTime);
			},
			
			getListArr(arr,type)
			{
				let len = arr.length;
				let tempArr = [];
				for(let i = 0; i<len; i++)
				{
					let o = arr[i];
					let temp = {};
					temp.name = o.name;
					temp.id = o.id;
					temp.type = type;
					tempArr.push(temp);
				}
				return tempArr;
			},
			
			show(type,arr,cItem)
			{
				
				if(type == "show")
				{
					this.curItem = cItem;
					this.list = arr;
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.state = 2;
				setTimeout(() => {
					this.state = state;
				}, timer);
			},
			
			changItem(item)
			{
				if(item.type == 1)
				{
					this.curStore = item;
				}
				else if(item.type == 3)
				{
					if(item.id == 5)
					{
						this.$refs.dateWin.show("show");
						return;
					}
					else
					{
						this.curTime.name = item.name;
						this.curTime.id = item.id;
						this.curTime.st = "";
						this.curTime.et = "";
					}
				}
				let data = {};
				data.curStore = this.curStore;
				data.curTime = this.curTime;
				this.$emit("loadData",data);
			},
			
			/***选择自定义时间*****/
			selectDate(st,et)
			{
				let data = {};
				this.curTime.id = 5;
				this.curTime.st = st;
				this.curTime.et = et;
				data.curStore = this.curStore;
				data.curTime = this.curTime;
				this.curTime.name = st + this.toTxt + et;
				this.$emit("loadData",data);
			},
		}
	}
</script>

<style lang="scss">
	.s-m-box
	{
		.menu-box
		{
			height: 40px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-bottom: 1px #EDEDED solid;
			background-color: #EEE;
			position: relative;
			.s-m-b
			{
				text-align: center;
				cursor: pointer;
				width: 50%;
			}
		}
		
		.mask-top
		{
			top: 94px;
			width: calc(25% - 60px) ;
			margin-left : 240px;
			z-index: 9999;
			.cate-content
			{
				.c-list
				{
					max-height: 384px;
					.cate-item
					{
						color: #333;
						padding: 5px;
						border-bottom: 1px #F1F1F1 solid;
						position: relative;
						cursor: pointer;
						.selected-icon
						{
							position: absolute;
							color: #3388ff;
							right: 10px;
							top:-10px;
							font-size: 30px;
						}
					}
					
					.cate-item-s
					{
						color: #3388ff;
						background-color: #dFdFdF;
					}
				}
			}
		}
	}
</style>
